
// ripple effect animations
@keyframes ripple_effect {
  to { background-size: 1000% 1000%; }
}

@keyframes scale_ripple_effect {
  to { background-size: auto, 1000% 1000%; }
}

@keyframes header_ripple_effect {
  from {
    background-image: radial-gradient(circle farthest-corner at center,
                                      $primary 0%,
                                      transparent 0%);
  }

  to {
    background-image: radial-gradient(circle farthest-corner at center,
                                      $primary 100%,
                                      transparent 0%);
  }
}

// Drawing mixins
@mixin entry($t, $fc:$indicator) {
//
// Entries drawing function
//
// $t: entry type
// $fc: focus color
//
// possible $t values:
// normal, focus, disabled, flat-normal, flat-focus, flat-disabled;
//

  @if $t == normal {
    transition: $shorter_transition, $shadow_transition;
    border: none;
    border-image: none;
    box-shadow: $shadow_1;
    border-radius: $button_radius;
    background-color: if($fc != $indicator, $fc, $base);
    color: if($fc != $indicator, on($fc), $text-secondary);
  }

  @if $t == focus {
    border: none;
    border-image: none;
    box-shadow: $shadow_2;
    color: if($fc != $indicator, on($fc), $text);
  }

  @if $t == disabled {
    opacity: 0.35;
  }

  @if $t == fallback-normal {
    border: 1px solid $solid-border;
    box-shadow: none;
    border-image: none;
    border-radius: $button_radius;
    background-color: if($fc != $indicator, $fc, $base);
    color: if($fc != $indicator, on($fc), $text-secondary);
  }

  @if $t == fallback-focus {
    border: 1px solid $primary;
    box-shadow: none;
    border-image: none;
    border-radius: $button_radius;
    background-color: if($fc != $indicator, $fc, $base);
    color: if($fc != $indicator, on($fc), $text);
  }

  @if $t == fallback-disabled {
    border: 1px solid $solid-border;
    box-shadow: none;
    border-image: none;
    background-color: $base_alt;
    color: $text-disabled;
    opacity: 1;
  }

  @if $t == flat-normal {
    transition: $shorter_transition, border-image $longer_duration $standard_curve;
    border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
                                  transparent 0%,
                                  transparent 0%)
                                  0 0 2 / 0 0 0px;
    box-shadow: inset 0 -1px if($fc != $indicator, $fc, $track);
    background-color: transparent;
    background-image: none;
    color: $text-secondary;
    border-width: 0;
  }

  @if $t == flat-hover {
    background-image: none;
    border-width: 0;
    background-color: transparent;
    color: $text;
    box-shadow: inset 0 -2px if($fc != $indicator, $fc, $text-disabled);
  }

  @if $t == flat-focus {
    background-image: none;
    border-width: 0;
    background-color: transparent;
    box-shadow: none;
    color: $text;
    border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
                                  $fc 100%,
                                  if($fc != $indicator, $fc, $text-disabled) 10%)
                                  0 0 2 / 0 0 2px;
  }

  @if $t == flat-disabled {
    border-width: 0;
    box-shadow: inset 0 -1px if($fc != $indicator, rgba($fc, 0.5), $divider);
    background-color: transparent;
    color: $text-disabled;
    opacity: 1;
  }
}


@mixin button($t, $c:$base, $tc:$text) {
//
// Button drawing function
//
// $t:    button type,
// $c:    base button color for colored* types
// $tc:   optional text color for colored* types
//
// possible $t values:
// normal, hover, active, disabled, checked, checked-disabled,
// flat-normal, flat-hover, flat-active, flat-disabled, flat-checked, flat-checked-disabled;
//

  @if $t == normal {
    transition: $shorter_transition,
                $shadow_transition,
                background-size $ripple_duration $deceleration_curve,
                background-image $ripple_opacity_duration $deceleration_curve;
    box-shadow: $shadow_1, inset 0 0 0 9999px transparent;
    background-color: $c;
    background-image: radial-gradient(circle farthest-corner at center,
                                      transparent 100%,
                                      transparent 0%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1000% 1000%;
    color: $text-secondary;
    border: none;
  }

  @if $t == hover {
    box-shadow: $shadow_2, inset 0 0 0 9999px transparent;
    color: $text;
    background-color: lighten($c, 5%);
  }

  @if $t == active {
    transition: $shorter_transition,
                background-size 0,
                background-image 0;
    animation: ripple_effect $shorter_duration $deceleration_curve forwards;
    box-shadow: $shadow_2, inset 0 0 0 9999px $overlay-normal;
    background-image: radial-gradient(circle farthest-corner at center,
                                      $overlay-active 10%,
                                      transparent 0%);
    background-size: 0% 0%;
    color: $text;
  }

  @if $t == disabled {
    box-shadow: none;
    background-color: rgba($c, 0.45);
    color: $text-secondary-disabled;
  }

  @if $t == checked {
    background-color: $primary;
    color: on($primary);
  }

  @if $t == checked-disabled {
    background-color: gtkalpha($primary, 0.25);
    color: gtkalpha($primary, 0.5);
  }

  // flat buttons
  @if $t == flat-normal {
    transition: $shorter_transition,
                background-size $ripple_duration $deceleration_curve,
                background-image $ripple_opacity_duration $deceleration_curve;
    box-shadow: inset 0 0 0 9999px transparent;
    background-color: transparent;
    background-image: radial-gradient(circle farthest-corner at center,
                                      transparent 100%,
                                      transparent 0%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1000% 1000%;
    color: $text-secondary;
  }

  @if $t == flat-hover {
    background-color: transparent;
    box-shadow: inset 0 0 0 9999px $overlay-hover;
    color: $text;
  }

  @if $t == flat-active {
    transition: $shorter_transition,
                background-size 0,
                background-image 0;
    animation: ripple_effect $shorter_duration $deceleration_curve forwards;
    box-shadow: inset 0 0 0 9999px $overlay-hover;
    background-image: radial-gradient(circle farthest-corner at center,
                                      $overlay-hover 10%,
                                      transparent 0%);
    background-size: 0% 0%;
    color: $text;
    background-color: transparent;
  }

  @if $t == flat-disabled {
    box-shadow: none;
    background-color: transparent;
    color: $text-secondary-disabled;
  }

  @if $t == flat-checked {
    color: $text;
    background-color: $overlay-checked;
    box-shadow: none;
  }

  @if $t == flat-checked-disabled {
    background-color: $overlay-normal;
    color: $text-disabled;
    box-shadow: none;
  }

  // fallback buttons
  @if $t == fallback-normal {
    border: 1px solid $solid-border;
    box-shadow: none;
    background-color: $c;
    color: $text-secondary;
  }

  @if $t == fallback-hover {
    box-shadow: none;
    background-color: mix($c, $text, 96%);
    color: $text;
  }

  @if $t == fallback-active {
    box-shadow: none;
    background-color: mix($c, $text, 92%);
    color: $text;
    animation: none;
  }

  @if $t == fallback-disabled {
    box-shadow: none;
    background-color: mix($background, $text, 96%);
    color: $text;
  }

  @if $t == fallback-checked {
    box-shadow: none;
    background-color: $primary;
    color: on($primary);
  }

  @if $t == fallback-checked-disabled {
    box-shadow: none;
    background-color: rgba($primary, 0.5);
    color: on($primary, disabled);
  }

  // headerbar buttons
  @if $t == header-normal {
    transition: none;
    animation: none;
    box-shadow: none;
    background-color: transparent;
    color: on($header, secondary);
  }

  @if $t == header-hover {
    transition: $shorter_transition,
                background-size 0,
                background-image 0;
    animation: none;
    box-shadow: inset 0 0 0 9999px rgba($primary, 0.3);
    background-image: radial-gradient(circle farthest-corner at center,
                                      rgba($primary, 0.3) 10%,
                                      transparent 0%);
    background-size: 0% 0%;
    color: indicator(header);
  }

  @if $t == header-active {
    transition: $shorter_transition,
                background-size 0,
                background-image 0;
    animation: ripple_effect $shorter_duration $deceleration_curve forwards;
    box-shadow: inset 0 0 0 9999px $primary;
    background-image: radial-gradient(circle farthest-corner at center,
                                      $primary 10%,
                                      transparent 0%);
    background-size: 0% 0%;
    color: on($primary);
  }

  @if $t == header-disabled {
    box-shadow: none;
    background-color: transparent;
    color: if($tc != $text, gtkalpha(currentColor, 0.3), gtkalpha(currentColor, 0.9 * 0.3));
  }

  @if $t == header-checked {
    background-color: $primary;
    color: on($primary);
  }

  @if $t == header-checked-hover {
    background-color: lighten($primary, 5%);
    background-image: none;
    box-shadow: none;
  }

  @if $t == header-checked-disabled {
    background-color: rgba($primary, 0.3);
    color: gtkalpha(on($primary), 0.3);
  }
}

@mixin overshoot($p, $t:normal, $c:$primary) {
//
// overshoot
//
// $p: position
// $t: type
// $c: base color
//
// possible $p values:
// top, bottom, right, left
//
// possible $t values:
// normal, backdrop
//

  $_position: center $p;

  @if ($p == left) or ($p == right) {
    $_position: $p center;
  }

  background-image: -gtk-gradient(radial,
                                  $_position, 0,
                                  $_position, 0.75,
                                  to(gtkalpha($c, 0.3)),
                                  to(transparent));

  background-repeat: no-repeat;
  background-position: $_position;

  background-color: transparent; // reset some properties to be sure to not inherit them somehow
  border: none;                  //
  box-shadow: none;              //
}


@mixin undershoot($p) {
//
// undershoot
//
// $p: position
//
// possible $p values:
// top, bottom, right, left
//

  $_undershoot_color_dark: gtkalpha($text, 0.3);
  $_undershoot_color_light: gtkalpha($base, 0.3);

  $_gradient_dir: left;
  $_dash_bg_size: 12px 1px;
  $_gradient_repeat: repeat-x;
  $_bg_pos: left $p;

  background-color: transparent; // shouldn't be needed, but better to be sure;

  @if ($p == left) or ($p == right) {
    $_gradient_dir: top;
    $_dash_bg_size: 1px 12px;
    $_gradient_repeat: repeat-y;
    $_bg_pos: $p top;
  }

  background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
                                    $_undershoot_color_light 50%,
                                    $_undershoot_color_dark 50%);

  padding-#{$p}: 1px;
  background-size: $_dash_bg_size;
  background-repeat: $_gradient_repeat;
  background-origin: content-box;
  background-position: $_bg_pos;
}
